<template>
	<div class="loginMain">
		<div class="login">
			<img class="symbol" src="../../assets/symbol.png" alt="">
			<div class="txt">
				<h1>欢迎来到忘忧</h1>
				<h3>用户登录</h3>
			</div>

			<div class="form">
				<div class="item">
					<span class="iconfont icon-shouji"></span>
					<input type="text" placeholder="手机号码" v-model="phone" />
				</div>
				<!-- <div class="item">
					<span class="iconfont icon-shouji"></span>
					<input type="text" placeholder="邮箱" v-model="email" />
				</div> -->
				<!-- <div class="item">
					<span class="iconfont icon-yanzhengma"></span>
					<input type="text" placeholder="验证码" v-model="code" />
					<button class="getCode" @click="getCode">发送</button>
				</div> -->
				<div class="item">
					<span class="iconfont icon-tianchongxing-"></span>
					<input type="password" placeholder="密码" v-model="password" />
				</div>

				<div class="frame">
					<div class="submit" @click="submit">提交</div>
				</div>
				<div class="tocreate">
					<div class="create" @click="create">注册</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		// getCaptchaSent,
		getLoginCellphone
	} from "../../api/login";
	import {
		Toast
	} from "vant";
	export default {
		data() {
			return {
				phone: "",
				// email:"",
				password: "",
				// code: "",
			};
		},
		methods: {
			create(){
				this.$router.push("/base/createUser");
			},
			// getCode() {
				// 1.验证手机号码
				// let reg =
				// 	/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0-9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				// if (!reg.test(this.phone)) {
				// 	Toast("请输入正确手机号码");
				// 	return;
				// }

				// let reg =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				// if (!reg.test(this.email)) {
				// 	Toast("请输入正确的邮箱");
				// 	return;
				// }
				// 请求接口验证码
				// getCaptchaSent({
				// 	phone: this.phone
				// }).then((data) => {
				// 	if (data.data) {
				// 		Toast("验证码发送成功");
				// 	} else {
				// 		Toast("验证码发送失败");
				// 	}
				// });
			// },
			submit() {
				// let regCode = /^[0-9]{4}$/;
				// // 验证码
				// if(!regCode.test(this.code)){
				//     Toast("请输入正确验证码");
				//     return;
				// }
				// 1.验证手机号码
				let regPhone =
					/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0-9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				if (!regPhone.test(this.phone)) {
					Toast("请填写正确信息");
					return;
				}
				// 密码
				let regPassword = /^[a-zA-Z]\w{5,17}$/;
				if (!regPassword.test(this.password)) {
					Toast("请填写正确信息");
					return;
				}
				// getCaptchaVerify({"phone":this.phone,"captcha":this.code}).then(data=>{
				//     if(data.data){ 
				//         // 验证手机密码
			getLoginCellphone({
				Phone: this.phone,
				Pwd: this.password,
			}).then((info) => {
				console.log(info.data);
				Toast("登陆成功");
				window.localStorage.setItem("token", info.data);
				window.localStorage.setItem("uid", info.data.id);
				window.localStorage.setItem("uName", info.data.UName);
				//登陆成功跳回个人中心页面
				// this.$router.push("/userInfo");
				this.$router.push("/index/recommend");
				this.$emit("getnavs-btn", true);
				this.$emit("get-uid", info.data.id);
				this.$emit("set-btn", 0);
			
			});
				//     }else{
				//         Toast("请填写正确信息");
				//     }
				// }).catch(()=>{
				//     Toast("请填写正确信息");
				// })
			},
		},
		created() {
			this.$emit("getnavs-btn", false);
		},
	};
</script>

<style lang="less">
	.loginMain {
		width: 100%;
		height: 100%;
	}

	.login {
		background-color: #0F172A;
		width: 100%;
		height: 100%;
		color: #fff;
		position: absolute;

		.symbol {
			// left: 30%;
			// padding-left: 60px;
			margin: 0 auto;
			top: 10%;
			position: relative;
		}
	}

	.txt {
		// margin: 80px 0 30px 70px;
		left: 12%;
		margin-bottom: 30px;
		margin-top: 80px;
		position: relative;

		h1 {
			font-size: 26px;
			text-align: left;
			height: 48px;
			// padding: 100px 0px 0px 46px;
			// width: 76%;
			// margin: auto;
		}

		h3 {
			font-size: 20px;
			color: #94A3B8;
			text-align: left;
			padding-top: 2px;
			// left: 12%;
			// margin: auto;
			// padding: 20px 0px 10px 46px;
		}

	}


	.form {
		position: relative;
		.item {
			width: 76%;
			height: 30px;
			line-height: 30px;
			margin: 0 auto;
			border-style: solid;
			border-color: #94A3B8;
			border-width: 1px;
			border-radius: 30px;
			margin-bottom: 20px;
			input {
				background-color: transparent;
				border: 0px;
				outline: none;
				text-indent: 0.5em;
				font-size: 14px;
				color: #fff;
			}

			span {
				font-size: 20px;
				margin-left: 10px;
				display: inline-block;
				vertical-align: middle;
			}

			.getCode {
				border: 1px solid transparent;
				background-color: #243DE2;
				height: 20px;
				line-height: 20px;
				width: 50px;
				border-radius: 20px;
				font-size: 12px;
				color: #FFFFFF;
				float: right;
				margin: 5px;
			}


		}

		.frame {
			width: 76%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #243DE2;
			border: 1px solid transparent;
			border-radius: 12px;
			margin-bottom: 12px;

			.submit {
				font-size: 15px;
				background-color: #243DE2;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}
		.tocreate {
			width: 76%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #1E293B;
			border: 1px solid transparent;
			border-radius: 12px;
			margin-bottom: 12px;
		
			.create {
				font-size: 15px;
				background-color: #1E293B;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}
	}
</style>
